<template>
  <div class="search">
    <div class="oneSearch">
      <h3>热门搜索</h3>
      <ul>
        <li
          v-for="(hotWord, index) in hotWords"
          :key="`hotWord-${index}`"
          :class="hotWord.highlight ? 'highlight' : ''"
          @click="toSearchShopList(hotWord.word)"
        >
          {{ hotWord.word }}
        </li>
      </ul>
    </div>
    <div class="oneSearch">
      <h3>商品分类</h3>
        <ul class="classSort">
          <li
            v-for="tab in tabs"
            :key="`tab-${tab.id}`"
            class="sort"
          >
            {{ tab.name }}
          </li>
        </ul>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      hotWords: [],
      tabs: []
    }
  },
  created () {
    // console.log(this.$route)
    this.$http.getSearch()
      .then(resp => {
        // console.log(resp)
        const { hotWords } = resp
        this.hotWords = hotWords
        // console.log(this.hotWords)
      })
    this.$http.getTabs()
      .then(resp => {
        // console.log(resp)
        this.tabs = resp.list
        this.tabs = this.tabs.slice(1)
        // console.log(this.tabs)
      })
  },
  methods: {
    toSearchShopList (word) {
      this.$router.push({
        name: 'SearchShopList',
        query: { word }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.search {
  display: flex;
  flex-direction: column;
  .oneSearch {
    // margin-bottom: 20px;
  }
  h3 {
    margin: 15px;
    font-size: 18px;
    color: #877a73;
  }
  ul {
    width: 100%;
    li {
      float: left;
      margin: 10px 10px;
      background: #f5f5f5;
      padding: 8px;
      border-radius: 10px;
      color: #43240c;
    }
    .highlight {
      color: #fa585a;
    }
  }
}
</style>
